<style lang="less">
  #header {
    padding: 1em 0;
    margin: 0 auto;
    background-size: cover;
    .navigator {
      width: 1280px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      ul {
        display: flex;
      }
      img{
        width: 80%;
      }
      ul a {
        color: #fff;
        font-size: 18px;
        padding: 10px 10px;
        margin: 0 30px;
        font-family: sans-serif;
        &.home {
          background: none !important;
        }
        &.router-link-active {
          background: rgba(255, 255, 255, .1);
          border-radius: 3px;
        }
      }
    }
  }
</style>

<template>
  <div id="header">
    <div class="navigator">
      <router-link to="home">
        <img src="~@/assets/logo.png">
      </router-link>
      <ul>
        <li>
          <router-link class="home" to="/">首页</router-link>
        </li>
        <li>
          <router-link to="/new-house">新楼盘</router-link>
        </li>
        <li>
          <router-link to="/secondary-source">二手房源</router-link>
        </li>
        <li>
          <router-link to="/danti">个人出租</router-link>
        </li>
        <li>
          <router-link to="/help">专家帮选</router-link>
        </li>
        <li>
          <router-link to="/news">楼市资讯</router-link>
        </li>
        <li>
          <router-link to="/about">公司简介</router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {}
    }
  }
</script>
